<template>
    <div>
        我是子组件
        <div v-if="showAdd">
            子组件调用父组件的方法：
            <van-button type="primary" size="mini" @click.stop="addCount">count+1</van-button>
        </div>
        <div v-if="showProps">
            我是父组件传来的内容： {{ title }} {{ warningText }} {{ warningSubText }}
        </div>
    </div>
</template>

<script setup lang="ts" name="son">
import { ref, reactive, defineEmits, defineExpose } from "vue";
import { Toast, showToast, Button, showLoadingToast } from 'vant';
const emit = defineEmits(["addCount"]);
//获取参数defineProps还有其他写法，我认为这样跟vue2相似 比较容易上手和记忆
const props = defineProps({
    title: {
        type: String,
        default: "",
    },
    warningText: {
        type: String,
        default: "",
    },
    warningSubText: {
        type: String,
        default: "",
    },
    showAdd: {
        type: Boolean,
        default: false,
    },
    showProps: {
        type: Boolean,
        default: false,
    }
});
const open = () => {
    showToast('son里的方法被调用了')
};

const addCount = () => {
    // emit使用跟vue2中this.$emit一致 emit(event,data)
    emit("addCount");
};
//暴露子组件的方法，给父组件使用
defineExpose({
    open,
});
</script>

<style scoped lang="scss"></style>